{extend name="public/menu2" /}
{block name='title'}-{$cur.name}{/block}

{block name='content'}
<!-- 地图 -->
<div id="map"></div>
<!-- 表单 -->
<div id="contact">
    <div class="company">
        <p class="zh_cn">{:setting('company')}</p>
        <p class="english">{:setting('company_en')}</p>
    </div>
    <div class="contact">
        <ul>
            {php}$list = json_decode(setting('list'),true);{/php}
            {foreach $list as $k=>$l}
            <li>
                <img src="{$l.thumb ?: ''}" />
                <div>
                    <p class="title">{$l.name ?: ''}</p>
                    <p class="content {if $k==1}tel{/if}">{$l.value ?: ''}</p>
                </div>
            </li>
            {/foreach}
        </ul>
        <div class="form">
            <div>
                <p><span>姓名</span>
                    <input type="text" name="name"></p>
                <p><span>电话</span>
                    <input type="tel" name="tel"></p>
            </div>
            <div>
                <span>邮箱</span>
                <input type="email" name="mail">
            </div>
            <div>
                <span>留言</span>
                <textarea name="content" id="" rows="4"></textarea>
            </div>
            <span class="btn">提交</span>
        </div>
    </div>
</div>
{/block}

{block name='script'}
<style>
    #map {
        width: 100%;
        height: 500px;
    }
    #contact{
        margin: 90px auto 65px;
        width: 1200px;
    }
    #contact .zh_cn{
        margin-bottom: 15px;
        font-size: 40px;
    }
    #contact .english{
        color: #999;
    }
    #contact .contact{
        display: flex;
        justify-content: space-between;
        margin-top: 65px;
    }
    #contact .contact ul{
        width: 360px;
    }
    #contact .contact li{
        display: flex;
        margin-bottom: 30px;
    }
    #contact .contact img{
        margin-right: 30px;
        width: 70px;
        height: 70px;
    }
    #contact .contact div{
        flex: 1;
        overflow: hidden;
    }
    #contact .contact .title{
        font-size: 24px;
    }
    #contact .contact .content{
        margin-top: 10px;
        line-height: 1.5;
    }
    #contact .contact .tel{
        font-size: 28px;
    }
    #contact .form{
        margin-left: 50px;
    }
    #contact .form div{
        margin-bottom: 20px;
        border-bottom: 1px solid #bbb;
        overflow: hidden;
        display: flex;
    }
    #contact .form p{
        flex: 1;
        display: flex;
    }
    #contact .form p:first-child{
        padding-right: 20px;
    }
    #contact .form span{
        margin-right: 20px;
        line-height: 40px;
        color: #aeaeae;
        float: left;
    }
    #contact .form input{
        flex: 1;
        height: 40px;
        line-height: 40px;
        border: none;
        outline: none;
        overflow: hidden;
    }
    #contact .form textarea{
        flex: 1;
        line-height: 1.5;
        border: none;
        resize: none;
    }
    #contact .form .btn{
        width: 170px;
        height: 54px;
        line-height: 54px;
        background-color: #8f000b;
        border-radius: 27px;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GoIwFSXHlIwArdeGq8ii4Fi4BPXeT7Pu&s=1"></script>
<script>
    $(function () {
        // 百度地图API功能
        var map = new BMap.Map("map");
        var point = new BMap.Point('{:setting("lng")}', '{:setting("lat")}');
        map.centerAndZoom(point, 15);

        var marker = new BMap.Marker(new BMap.Point('{:setting("lng")}', '{:setting("lat")}')); // 创建点

        map.addOverlay(marker); //增加点

        $('.btn').on('click',function () {
            var name = $('[name="name"]').val();
            var tel = $('[name="tel"]').val();
            var mail = $('[name="mail"]').val();
            var content = $('[name="content"]').val();
            if (name==''){
                $('[name="name"]').focus();
            }else if(tel==''){
                $('[name="tel"]').focus();
            }else if(mail==''){
                $('[name="mail"]').focus();
            }else if(content==''){
                $('[name="content"]').focus();
            }else {
                $.ajax({
                    url:'{:url("/contact")}',
                    type:'post',
                    data:{name:name,tel:tel,mail:mail,content:content},
                    success:function (res) {
                        if(res.code==1){
                            alert('提交成功！');
                            location.reload();
                        }else if(res.code=='busy'){
                            alert('您操作太频繁啦，稍后再来吧！');
                        }else {
                            $('[name="'+res.code+'"]').focus();
                        }
                    }
                })
            }
        })
    })
</script>

{/block}